<template>
  <view class="container">
    <view class="order-item" v-for="(order, index) in orderList" :key="index" @click="goPage(item)">
      <!-- 订单标题和交易状态 -->
      <view class="order-header">
        <text class="order-title">{{ order.title }}</text>
        <text class="order-status">{{ order.status }}</text>
      </view>

     <view class="order-box">
     	<view class="order-box-l">
     		<view class="order-details">
     		  <view class="detail-text">{{ order.details }}</view>
     		</view>
     		<!-- 订单详情规格 -->
     		<view class="order-details">
     		  <text class="detail-text">{{ order.details }}</text>
     		</view>
     		
     		<!-- 价格、数量、运费 -->
     		<view class="order-info">
     		  <text class="price"><text class="price-icon">￥</text> {{ order.price }}</text>
     		  <text class="quantity"> / 共 {{ order.quantity }} 张</text>
     		  <text class="shipping">（含运费: {{ order.shipping }}）</text>
     		</view>
     	</view>
     	
     	<!-- 订单图片 -->
     	<view class="order-image">
     	  <image :src="order.image" mode="aspectFill" class="image"></image>
     	</view>
     </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: [
        {
          title: '五月天 LIFE[人生无限公司]世五月天',
          status: '已支付',
          details: '佛山: 体育馆, 尺寸: L',
          price: '100.00',
          quantity: 2,
          shipping: 10,
          image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg'
        },
        {
          title: '[A CLASSIC TOUR 学友·经典]世界巡回演唱会',
          status: '待发货',
          details: '规格: 白色, 尺寸: M',
          price: '200.00',
          quantity: 1,
          shipping: 15,
          image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg'
        },
        // 更多订单...
      ]
    };
  },
  methods:{
	goPage(){
		uni.navigateTo({
			url:'/page_up/detail'
		})
	}
  },
};
</script>

<style lang="less" scoped>
	page{
		
		background: #f2f2fa;
	}
.container {
  padding: 20rpx;
}

.order-item {
	background: white;
  margin-bottom: 20rpx;
  padding: 40rpx 30rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: border-box;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.order-title {
	font-size: 32rpx;
	width:500rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  font-weight: bold;
}

.order-status {
  font-size: 28rpx;
}
.order-box{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order-details {
  margin-bottom: 10rpx;
}
.detail-text-l{
}
.detail-text {
  font-size: 28rpx;
  color: #666;
}

.order-info {
  display: flex;
  justify-content: space-between;
  align-items:center;
  margin-top: 50rpx;
}
.price{
  font-size: 40rpx;
  font-weight: bold;
  margin-right: 10rpx;
  .price-icon{
	  font-size: 20rpx;
  }
	
}
 .quantity, .shipping {
  font-size: 28rpx;
  color: #333;
}

.order-image {
  display: flex;
  justify-content: flex-end;
  .image {
    width: 130rpx;
    height: 200rpx;
    border-radius: 10rpx;
  }
}


</style>